<template>
  <div class="ue-class">
    <div class="change-button">
      <van-config-provider theme="dark">
        <van-button
          color="#7232dd"
          type="primary"
          size="mini"
          plain
          style="margin-left: 10px"
          v-for="(item, index) in uePlayList"
          :key="index"
          @click="handleClickChange(item, index)"
          >{{ item.title }}</van-button
        ></van-config-provider
      >
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";

const router = useRouter();

let comList = ["ue4Player", "ue4PlayerDefault", "ue4PlayerPeer"];

const uePlayList = ref([
  {
    id: 1,
    title: "ue改",
    url: "/ueDemo/ue_1",
    name: "ue_1",
  },
  {
    id: 2,
    title: "ue原",
    url: "/ueDemo/ue_2",
    name: "ue_2",
  },
  // {
  //   id: 3,
  //   title: "ue精",
  //   url: "/ueDemo/ue_3",
  //   name: "ue_3",
  // },
]);
const changeUe = ref(true);
const currentChangeIndex = ref(1);
const handleClickChange = (item, index) => {
  console.log("切换uePlayer", item.url);
  showToast("当前切换了" + item.title);
  currentChangeIndex.value = index;
  // router.push({ name: item.name });
  router.push(item.url);
  // changeUe.value = !changeUe.value;
};
</script>

<style lang="scss" scoped>
.ue-class {
  height: 100%;
  position: relative;
  // height: calc(100vh - 50px);
  .change-button {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 10;
    transform: translate(-50%);
    text-align: center;
  }
}
</style>
